<template>
  <view>
    <!-- 搜索区域 -->
    <van-search
      :value="value"
      placeholder="请输入搜索关键词"
      show-action
      @change="onChange"
      @search="onSearch"
      @cancel="onCancel"
    />

    <!-- 搜索建议列表 -->
    <view v-if="isShowHistory">
      <van-cell-group>
        <van-cell
          v-for="(item, index) in suggestList"
          :key="index"
          :title="item.goods_name"
          @click="goGoodDetail(item.goods_id)"
        />
      </van-cell-group>
    </view>

    <!-- 搜索历史区域 -->
    <view v-else>
      <view class="history_title">
        <text>历史搜索</text>
        <van-icon name="delete" @click="removeHistory" />
      </view>

      <view class="tagparent">
        <van-tag plain type="warning" v-for="(item, index) in kwList" :key="index">{{ item }}</van-tag>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: '', // 用户输入的关键字
      suggestList: [], // 搜索建议列表
      kwList: []
    }
  },
  onLoad() {
    // 取出本地存储的搜索历史，如果没有，设置为空数组
    this.kwList = uni.getStorageSync('kw') || []

    console.log(this.kwList)
  },
  methods: {
		removeHistory () {
			this.kwList = []
			uni.setStorageSync('kw', [])
		},
    // 输入内容变化时触发
    onChange(e) {
      if (e.detail.trim().length <= 0) {
        this.suggestList = []
        return
      }
      this.value = e.detail
      this.getSuggestList(this.value)
    },

    // 获取搜索建议列表的数据
    async getSuggestList(searchVal) {
      const res = await this.request({
        url: '/goods/qsearch',
        data: {
          query: searchVal
        }
      })

      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '获取数据失败',
          duration: 2000,
          icon: 'none'
        })
      }

      this.suggestList = res.message
    },

    // 确定搜索时触发
    onSearch(e) {
      // 如果用户没有输入任何内容，不做处理
      if (e.detail.trim().length <= 0) {
        return
      }

      // 1. 只能存储 10 条数据，如果超出的 10 条，把最后一个移除
      // 2. 存储的关键字不能重复
      // 3. 最新输入的关键字应该在最前面

      if (this.kwList.indexOf(e.detail) === -1) {
        this.kwList.unshift(e.detail)
      }

      // splice 和 slice 的区别
      // slice 不会修改原数组，而是返回一个新的数组
      // splice 会对原数组进行修改，需要把最新的值重新赋值
      this.kwList = this.kwList.splice(0, 10)

      uni.setStorageSync('kw', this.kwList)

      uni.navigateTo({
        url: `/pages/goods_list/goods_list?query=${e.detail.trim()}`
      })
    },

    // 取消搜索搜索时触发
    onCancel() {
			this.value = ''
			this.suggestList = []
    },

    // 点击搜索建议列表项跳转到详情页
    goGoodDetail(goodsId) {
      uni.navigateTo({
        url: `/pages/goods_detail/main?goods_id=${goodsId}`
      })
    }
  },
  computed: {
    isShowHistory() {
      // 如果长度小于等于 0，说明输入框没有搜索任何内容
      if (this.value.length <= 0) {
        return false
      }

      // 如果长度大于 0 ，说明进行了搜索，展示搜索建议列表
      return true
    }
  }
}
</script>

<style lang="less">
.history_title {
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx;

  text:nth-child(1) {
    font-size: 26rpx;
    font-weight: bold;
  }
}

.tagparent {
  margin-top: 20rpx;

  .van-tag {
    margin: 10rpx;
  }
}
</style>
